<html>
<head>

    <meta disription="青科技 八目砚 智能硬件 软硬结合 cyan.org.cn">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- ========== CSS ========== -->
    <link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.staticfile.org/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- ========== Scripts ========== -->

    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.1-rc2/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <style type="text/css">
        .background-gradient {
            padding: 25px, 0px, 25px, 0px;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#a8d2e2), to(#516968)); /* Webkit */
            background: -moz-linear-gradient(top, #a8d2e2, #516968); /* Mozilla */
            background: -ms-linear-gradient(top, #a8d2e2 0%, #516968 100%); /* IE 11 */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000'); /* IE6,IE7 */
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#a8d2e2', endColorstr='#516968')"; /* IE8 */
        }

        .img-reflect {
            -webkit-box-reflect: below;
            -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.5)));
        }

        .img-reflection {
            -webkit-transform: scaleY(-1);
            -moz-transform: scaleY(-1);
            -ms-transform: scaleY(-1);
            -o-transform: scaleY(-1);
            transform: scaleY(-1);
            opacity: 0.4;
            filter: alpha(opacity='40');
        }

        #ninjaLogo:hover > #ninjaBody {
            animation: ninja-disappear 2s;
            -moz-animation: ninja-show 3s; /* Firefox */
            -webkit-animation: ninja-bump 1s; /* Safari 和 Chrome */
            -o-animation: ninja-show 1s; /* Opera */
        }

        #ninjaLogo:hover > #ninjaReflection {
            animation: ninja-disappear-reflection 2s;
            -moz-animation: ninja-show 1s; /* Firefox */
            -webkit-animation: ninja-bump-reflection 1s; /* Safari 和 Chrome */
            -o-animation: ninja-show 1s; /* Opera */
        }

        /*========= IE Animation ==========*/
        @keyframes ninja-disappear {
            0% {
                transform: scale(1) translate(0px, 0px);
            }
            25% {
                opacity: 0;
                transform: scaleY(5) scaleX(0.2) translate(0px, -50px);
            }
            50% {
                opacity: 0;
                transform: scaleY(5) scaleX(0.2) translate(0px, -50px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translate(0px, 0px);
            }
        }

        @keyframes ninja-disappear-reflection {
            0% {
                transform: scaleY(-1) scaleX(1) translate(0px, 0px);
            }
            25% {
                opacity: 0;
                transform: scaleY(-5) scaleX(0.2) translate(0px, -50px);
            }
            50% {
                opacity: 0;
                transform: scaleY(-5) scaleX(0.2) translate(0px, -50px);
            }
            100% {
                opacity: 0.4;
                transform: scaleY(-1) scaleX(1) translate(0px, 0px);
            }
        }

        /*========== Firefox Animation ==========*/

        /*========== WebKit Animation ==========*/
        @-webkit-keyframes ninja-bump /* Safari 和 Chrome */
        {
            0% {
                -webkit-transform: rotate(0deg) skew(0deg) scale(1) translate(0px, 0px);
            }
            16.6% {
                -webkit-transform: rotate(-25deg) skew(0deg) scale(1) translate(0px, 0px);
            }
            33.3% {
                -webkit-transform: rotate(25deg) skew(0deg) scale(1) translate(0px, 0px);
            }
            50% {
                -webkit-transform: rotate(-25deg) skew(0deg) scale(1) translate(0px, 0px);
            }
            66.6% {
                -webkit-transform: rotate(25deg) skew(0deg) scale(1) translate(0px, 0px);
            }
            83.3% {
                -webkit-transform: rotate(-25deg) skew(0deg) scale(1) translate(0px, 0px);
            }
            100% {
                -webkit-transform: rotate(0deg) skew(0deg) scale(1) translate(0px, 0px);
            }
        }

        @-webkit-keyframes ninja-bump-reflection /* Safari 和 Chrome */
        {
            0% {
                -webkit-transform: rotate(0deg) scaleY(-1);
            }
            16.6% {
                -webkit-transform: rotate(25deg) scaleY(-1);
            }
            33.3% {
                -webkit-transform: rotate(-25deg) scaleY(-1);
            }
            50% {
                -webkit-transform: rotate(25deg) scaleY(-1);
            }
            66.6% {
                -webkit-transform: rotate(-25deg) scaleY(-1);
            }
            83.3% {
                -webkit-transform: rotate(25deg) scaleY(-1);
            }
            100% {
                -webkit-transform: rotate(0deg) scaleY(-1);
            }
        }
    </style>
</head>
<body>

<div id="viewPort" class="background-gradient" name="viewPort">
    <div id="viewContent" class="container">
        <!-- ==========  ========== -->
        <div class="row text-center">
            <div class="H3" style="color:white">Hello Apprentice !!</div>
        </div>
        <a href="http://www.cyan.org.cn/">
            <div id="ninjaLogo" name="ninjaLogo"
                 class="row text-center">
                <img id="ninjaBody" name="ninjaBody"
                     class="img-body"
                     src=""/>
                <br/>
                <img id="ninjaReflection" name="ninjaReflection"
                     class="img-reflection"
                     src=""/>
            </div>
        </a>
    </div>
</div>

<script type="text/javascript">
    var g_viewPort = {
        width: 0,
        height: 0
    }
    var findDimensions = function () {
        /*获取窗口宽度 */
        if (window.innerWidth)
            g_viewPort.width = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
            g_viewPort.width = document.body.clientWidth;
        /* 获取窗口高度 */
        if (window.innerHeight)
            g_viewPort.height = window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))
            g_viewPort.height = document.body.clientHeight;
        /* 通过深入Document内部对body进行检测，获取窗口大小 */
        if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
            g_viewPort.height = document.documentElement.clientHeight;
            g_viewPort.width = document.documentElement.clientWidth;
        }
        return g_viewPort;
    };

    /*==========  ==========*/
    var viewPortFrame = document.getElementById('viewPort');
    var viewContent = document.getElementById('viewContent');

    var onWindowResize = function () {
        var viewPortSize = findDimensions();
        console.info(viewPortFrame.style);
        console.info(viewContent.style);
        viewPortFrame.style.height = viewPortSize.height;
        viewContent.style.paddingTop = ( viewPortSize.height - 420 ) / 2;
    }
    /*========== Initialize ========*/
    window.onresize = onWindowResize;
    onWindowResize();
</script>

</body>
</html>